/**
 * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
 * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
 */

import type { Component } from 'vue';

import type { BaseFormComponentType } from '@vben/common-ui';
import type { Recordable } from '@vben/types';

import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  h,
  ref,
} from 'vue';

import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { notification } from 'ant-design-vue';

import { FileUploadOld, ImageUploadOld } from '#/components/upload-old';

const RichTextarea = defineAsyncComponent(() =>
  import('#/components/tinymce/index').then((res) => res.Tinymce),
);

const FileUpload = defineAsyncComponent(() =>
  import('#/components/upload').then((res) => res.FileUpload),
);

const ImageUpload = defineAsyncComponent(() =>
  import('#/components/upload').then((res) => res.ImageUpload),
);

const UserListSelect = defineAsyncComponent(() =>
  import('#/components/user-list-select').then((res) => res.UserListSelect),
);

const GroupSearchSelect = defineAsyncComponent(() =>
  import('#/components/group-search-select').then(
    (res) => res.GroupSearchSelect,
  ),
);

const TagList = defineAsyncComponent(() =>
  import('#/components/tag').then((res) => res.TagList),
);

const CompanyFavoriteSelect = defineAsyncComponent(() =>
  import('#/components/favorite').then((res) => res.CompanyFavoriteSelect),
);

const PersonalFavoriteSelect = defineAsyncComponent(() =>
  import('#/components/favorite').then((res) => res.PersonalFavoriteSelect),
);

const CompanyTagSelect = defineAsyncComponent(() =>
  import('#/components/tag').then((res) => res.CompanyTagSelect),
);

const PersonalTagSelect = defineAsyncComponent(() =>
  import('#/components/tag').then((res) => res.PersonalTagSelect),
);

const TagSearchFilter = defineAsyncComponent(() =>
  import('#/components/tag').then((res) => res.TagSearchFilter),
);

const AddressCascader = defineAsyncComponent(() =>
  import('#/components/advanced-filter').then((res) => res.AddressCascader),
);

const ExhibitionSelect = defineAsyncComponent(() =>
  import('#/components/advanced-filter').then((res) => res.ExhibitionSelect),
);

const QuestionSelect = defineAsyncComponent(() =>
  import('#/components/advanced-filter').then((res) => res.QuestionSelect),
);

const RegisterTrackCategorySelect = defineAsyncComponent(() =>
  import('#/components/source').then((res) => res.RegisterTrackCategorySelect),
);

const RegisterTrackSelect = defineAsyncComponent(() =>
  import('#/components/source').then((res) => res.RegisterTrackSelect),
);

const SourceSelect = defineAsyncComponent(() =>
  import('#/components/source').then((res) => res.SourceSelect),
);

const SmsTemplateSelect = defineAsyncComponent(() =>
  import('#/components/advanced-filter').then((res) => res.SmsTemplateSelect),
);

const EmailTemplateSelect = defineAsyncComponent(() =>
  import('#/components/advanced-filter').then((res) => res.EmailTemplateSelect),
);

const CompanySearchInput = defineAsyncComponent(() =>
  import('#/components/advanced-filter').then((res) => res.CompanySearchInput),
);

const CompanySearchSelect = defineAsyncComponent(() =>
  import('#/components/advanced-filter').then((res) => res.CompanySearchSelect),
);

const MeetingSearchInput = defineAsyncComponent(() =>
  import('#/components/advanced-filter').then((res) => res.MeetingSearchInput),
);

const MeetingSearchSelect = defineAsyncComponent(() =>
  import('#/components/advanced-filter').then((res) => res.MeetingSearchSelect),
);

const MeetingSeriesSelect = defineAsyncComponent(() =>
  import('#/components/advanced-filter').then((res) => res.MeetingSeriesSelect),
);

const NumberRangeInput = defineAsyncComponent(() =>
  import('#/components/advanced-filter').then((res) => res.NumberRangeInput),
);

const TycCompanySearchSelect = defineAsyncComponent(() =>
  import('#/components/advanced-filter').then(
    (res) => res.TycCompanySearchSelect,
  ),
);

const SourceCascader = defineAsyncComponent(() =>
  import('#/components/source').then((res) => res.SourceCascader),
);

const RegisterTrackCascader = defineAsyncComponent(() =>
  import('#/components/source').then((res) => res.RegisterTrackCascader),
);

const AutoComplete = defineAsyncComponent(
  () => import('ant-design-vue/es/auto-complete'),
);
const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
const Checkbox = defineAsyncComponent(
  () => import('ant-design-vue/es/checkbox'),
);
const CheckboxGroup = defineAsyncComponent(() =>
  import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
);
const DatePicker = defineAsyncComponent(
  () => import('ant-design-vue/es/date-picker'),
);
const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider'));
const Input = defineAsyncComponent(() => import('ant-design-vue/es/input'));
const InputNumber = defineAsyncComponent(
  () => import('ant-design-vue/es/input-number'),
);
const InputPassword = defineAsyncComponent(() =>
  import('ant-design-vue/es/input').then((res) => res.InputPassword),
);
const Mentions = defineAsyncComponent(
  () => import('ant-design-vue/es/mentions'),
);
const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio'));
const RadioGroup = defineAsyncComponent(() =>
  import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
);
const RangePicker = defineAsyncComponent(() =>
  import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
);
const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate'));
const Select = defineAsyncComponent(() => import('ant-design-vue/es/select'));
const Space = defineAsyncComponent(() => import('ant-design-vue/es/space'));
const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch'));
const Textarea = defineAsyncComponent(() =>
  import('ant-design-vue/es/input').then((res) => res.Textarea),
);
const TimePicker = defineAsyncComponent(
  () => import('ant-design-vue/es/time-picker'),
);
const TreeSelect = defineAsyncComponent(
  () => import('ant-design-vue/es/tree-select'),
);
const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));

const withDefaultPlaceholder = <T extends Component>(
  component: T,
  type: 'input' | 'select',
  componentProps: Recordable<any> = {},
) => {
  return defineComponent({
    name: component.name,
    inheritAttrs: false,
    setup: (props: any, { attrs, expose, slots }) => {
      const placeholder =
        props?.placeholder ||
        attrs?.placeholder ||
        $t(`ui.placeholder.${type}`);

      // 透传组件暴露的方法
      const innerRef = ref();
      const publicApi: Recordable<any> = {};
      expose(publicApi);
      const instance = getCurrentInstance();
      instance?.proxy?.$nextTick(() => {
        for (const key in innerRef.value) {
          if (typeof innerRef.value[key] === 'function') {
            publicApi[key] = innerRef.value[key];
          }
        }
      });
      return () =>
        h(
          component,
          {
            ...componentProps,
            placeholder,
            ...props,
            ...attrs,
            ref: innerRef,
          },
          slots,
        );
    },
  });
};

// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
export type ComponentType =
  | 'AddressCascader'
  | 'ApiSelect'
  | 'ApiTreeSelect'
  | 'AutoComplete'
  | 'Checkbox'
  | 'CheckboxGroup'
  | 'CompanyFavoriteSelect'
  | 'CompanySearchInput'
  | 'CompanySearchSelect'
  | 'CompanyTagSelect'
  | 'DatePicker'
  | 'DefaultButton'
  | 'Divider'
  | 'EmailTemplateSelect'
  | 'ExhibitionSelect'
  | 'FileUpload'
  | 'FileUploadOld'
  | 'GroupSearchSelect'
  | 'IconPicker'
  | 'ImageUpload'
  | 'ImageUploadOld'
  | 'Input'
  | 'InputNumber'
  | 'InputPassword'
  | 'MeetingSearchInput'
  | 'MeetingSearchSelect'
  | 'MeetingSeriesSelect'
  | 'Mentions'
  | 'NumberRangeInput'
  | 'PersonalFavoriteSelect'
  | 'PersonalTagSelect'
  | 'PrimaryButton'
  | 'QuestionSelect'
  | 'Radio'
  | 'RadioGroup'
  | 'RangePicker'
  | 'Rate'
  | 'RegisterTrackCascader'
  | 'RegisterTrackCategorySelect'
  | 'RegisterTrackSelect'
  | 'RichTextarea'
  | 'Select'
  | 'SmsTemplateSelect'
  | 'SourceCascader'
  | 'SourceSelect'
  | 'Space'
  | 'Switch'
  | 'TagList'
  | 'TagSearchFilter'
  | 'Textarea'
  | 'TimePicker'
  | 'TreeSelect'
  | 'TycCompanySearchSelect'
  | 'Upload'
  | 'UserListSelect'
  | BaseFormComponentType;

async function initComponentAdapter() {
  const components: Partial<Record<ComponentType, Component>> = {
    // 如果你的组件体积比较大，可以使用异步加载
    // Button: () =>
    // import('xxx').then((res) => res.Button),
    ApiSelect: withDefaultPlaceholder(
      {
        ...ApiComponent,
        name: 'ApiSelect',
      },
      'select',
      {
        component: Select,
        loadingSlot: 'suffixIcon',
        visibleEvent: 'onDropdownVisibleChange',
        modelPropName: 'value',
      },
    ),
    ApiTreeSelect: withDefaultPlaceholder(
      {
        ...ApiComponent,
        name: 'ApiTreeSelect',
      },
      'select',
      {
        component: TreeSelect,
        fieldNames: { label: 'label', value: 'value', children: 'children' },
        loadingSlot: 'suffixIcon',
        modelPropName: 'value',
        optionsPropName: 'treeData',
        visibleEvent: 'onVisibleChange',
      },
    ),
    AutoComplete,
    Checkbox,
    CheckboxGroup,
    DatePicker,
    // 自定义默认按钮
    DefaultButton: (props, { attrs, slots }) => {
      return h(Button, { ...props, attrs, type: 'default' }, slots);
    },
    Divider,
    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
      iconSlot: 'addonAfter',
      inputComponent: Input,
      modelValueProp: 'value',
    }),
    Input: withDefaultPlaceholder(Input, 'input'),
    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
    Mentions: withDefaultPlaceholder(Mentions, 'input'),
    // 自定义主要按钮
    PrimaryButton: (props, { attrs, slots }) => {
      return h(Button, { ...props, attrs, type: 'primary' }, slots);
    },
    Radio,
    RadioGroup,
    RangePicker,
    Rate,
    Select: withDefaultPlaceholder(Select, 'select'),
    Space,
    Switch,
    Textarea: withDefaultPlaceholder(Textarea, 'input'),
    TimePicker,
    TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
    Upload,
    ImageUpload,
    FileUpload,
    RichTextarea,
    ImageUploadOld,
    FileUploadOld,
    UserListSelect,
    GroupSearchSelect,
    CompanySearchInput,
    CompanySearchSelect,
    MeetingSearchInput,
    MeetingSearchSelect,
    MeetingSeriesSelect,
    TycCompanySearchSelect,
    TagList,
    CompanyFavoriteSelect,
    PersonalFavoriteSelect,
    CompanyTagSelect,
    PersonalTagSelect,
    TagSearchFilter,
    AddressCascader,
    SourceCascader,
    RegisterTrackCascader,
    ExhibitionSelect,
    QuestionSelect,
    RegisterTrackCategorySelect,
    RegisterTrackSelect,
    SourceSelect,
    SmsTemplateSelect,
    EmailTemplateSelect,
    NumberRangeInput,
  };

  // 将组件注册到全局共享状态中
  globalShareState.setComponents(components);

  // 定义全局共享状态中的消息提示
  globalShareState.defineMessage({
    // 复制成功消息提示
    copyPreferencesSuccess: (title, content) => {
      notification.success({
        description: content,
        message: title,
        placement: 'bottomRight',
      });
    },
  });
}

export { initComponentAdapter };
